<template>
 <div>
  <HelloWorld :data="data"></HelloWorld>

 </div>
</template>
<script setup lang='ts'>
import { ref,reactive,onMounted} from 'vue'
import HelloWorld from './components/HelloWorld.vue'
// 递归组件
// ： 原理跟我们写js递归是一样的 自己调用自己 通过一个条件来结束递归 否则导致内存泄漏
// 定义数据，子组件接受
type TreeList = {
  name: string;
  icon?: string;
  children?: TreeList[] | [];
};
const data = reactive<TreeList[]>([
  {
    name: "no.1",
    children: [
      {
        name: "no.1-1",
        children: [
          {
            name: "no.1-1-1",
          },
        ],
      },
    ],
  },
  {
    name: "no.2",
    children: [
      {
        name: "no.2-1",
      },
    ],
  },
  {
    name: "no.3",
  },
]);

</script>
<style scoped lang='scss'>
</style>